<template>
  <div class="eventDetail">
    <div class="slideshow">
      <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
        <block v-for="(item, index) in slideimg" :index="index" :key="index">
          <swiper-item>
            <img :src="item.url" mode="scaleToFill" />
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="Votes">
      <ul>
        <li>
          <p>{{hdActivity.enroll}}</p>
          <p>已报名</p>
        </li>
        <li>
          <p>{{hdActivity.sumVote}}</p>
          <p>总票数</p>
        </li>
        <li>
          <p>{{hdActivity.browse}}</p>
          <p>浏览量</p>
        </li>
      </ul>
    </div>
    <div @click="apply()" class="apllyBtn">我要报名</div>
    <div class="countDown">
      距离活动结束：
      <count-down :endTimer="hdActivity.end"></count-down>
    </div>
    <div class="search">
      <input type="text" placeholder="姓名" v-model="name" />
      <div @click="searchBtn">搜索</div>
    </div>
    <section class="VoteContent">
      <div>
        <picker mode="selector" :range="campus" :value="index" @change="bindPickerChange">
          <div class="picker">{{campus[index]}}</div>
        </picker>
      </div>
      <ul v-if="!type">
        <li
       
          v-for="(item,index) in VotePlayer"
          :index="index"
          :key="index"
        >
        <aside @click="linkToDetail(item.id)">
          <img :src="item.coverImg" alt />
          <p>{{item.name}}</p>
          <p>{{item.ticket}}票</p>
          <p class="num">编号:{{item.id}}</p>
          </aside>
          <div @click="voting(item.name,item.activityId,item.id)">投票</div>
        </li>
      </ul>
      <ul v-if="type">
        <li v-for="(item,index) in VotePlayer1" :index="index" :key="index">
         <aside @click="linkToDetail(item.id)" >
          <img :src="item.coverImg" alt />
          <p>{{item.name}}</p>
          <p>{{item.ticket}}票</p>
          <p class="num">编号:{{item.id}}</p>
          </aside>
          <div @click="voting(item.name,item.activityId,item.id)">投票</div>

        </li>
      </ul>
    </section>
    <bg-music :src="hdActivity.music"></bg-music>
    <ul class="service">
      <li>列表</li>
      <li>关注</li>
      <li>客服</li>
    </ul>
  </div>
</template>

<script>
import bgMusic from "@/components/music.vue";
import countDown from "@/components/countDown.vue";
export default {
  data() {
    return {
      slideimg: [],
      hdActivity: [],
      VotePlayer: [],
      VotePlayer1: [],
      VotePlayer2: [],
      campus: [
        "选择分组",
        "北大青鸟鲁广小区",
        "北大青鸟光谷校区",
        "北大青鸟光谷学院",
        "课工场华中直营总校",
        "课工场徐东校区",
        "课工场光谷校区",
        "课工场郑州兰德校区",
        "北大青鸟徐东校区"
      ],
      type: false,
      index: 0,
      name: "",
      pagenum: 1, //当前页数
      pagesize: 6 // 一次取出的数据
    };
  },
  components: {
    bgMusic,
    countDown
  },
  methods: {
    apply() {
      wx.navigateTo({ url: "../applypage/main" });
    },
    linkToDetail(ids) {
      const url = "../playerDetail/main?id=";
      wx.navigateTo({ url: url + ids });
    },
    bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为", e.mp.detail.value);
      this.index = e.mp.detail.value;
      if (this.campus[this.index] == "选择分组") {
        this.VotePlayer1 = this.VotePlayer2;
        this.type = false;
      } else {
        let res = this.VotePlayer2.filter(
          item => item.groupName == this.campus[this.index]
        );
        this.VotePlayer1 = res;
        this.type = true;
        console.log("aaa", this.VotePlayer);
      }
    },

    /* 获取数据开始 */
    getListData() {
      return this.$fly.post("/list", { activityId: 1 });
    },
    getPlayerData() {
      return this.$fly.post("/activityPlayer");
    },
    getEventDetailData() {
      let that = this;
      this.$fly
        .all([this.getListData(), this.getPlayerData()])
        .then(
          this.$fly.spread(function(list, player) {
            console.log("获取List数据成功", list);
            that.slideimg = list.data.data.coverList;
            that.hdActivity = list.data.data.hdActivity;
            console.log("获取Player数据成功", player);
            that.VotePlayer = that.paging(
              that.pagenum,
              that.pagesize,
              player.data.rows
            );
            that.VotePlayer1 = player.data.rows;
            that.VotePlayer2 = player.data.rows;

            console.log(that.VotePlayer);
          })
        )
        .catch(function(err) {
          console.log("获取数据失败", err);
        });
    },
    /* 获取数据结束 */
    searchBtn() {
      let that = this;
      if (this.name == "") {
        this.type = false;
      } else {
        this.type = true;
        this.$fly.post("/activityPlayer", { name: this.name }).then(res => {
          that.VotePlayer1 = res.data.rows;
        });
      }
    },
    // 处理数据
    paging(pagenum, pagesize, array) {
      const offset = (pagenum - 1) * pagesize;
      return offset + pagesize >= array.length
        ? array.slice(offset, array.length)
        : array.slice(offset, offset + pagesize);
    },
    voting(name,activityId,id) {
      this.$fly
        .post("/vote", {
          extend1: this.openid,
          extend2: name,
          extend3: activityId,
          playerId:id
        })
        .then(res => {
          console.log("投票成功", res);
          wx.showToast({
            title: "投票成功",
            icon: "success",
            duration: 2000
          });
        })
        .catch(err => {
          console.log("投票失败", err);
        });
    }
  },
  onReachBottom() {
    let that = this;
    wx.showLoading({
      title: "LOADING..."
    });
    setTimeout(function() {
      wx.hideLoading();
    }, 1000);
    this.$fly.post("/activityPlayer").then(res => {
      that.pagenum = that.pagenum + 1;
      that.VotePlayer = that.VotePlayer.concat(
        that.paging(that.pagenum++, that.pagesize, res.data.rows)
      );
    });
  },
  onLoad() {
    this.getEventDetailData();
  },
  created() {}
};
</script>

<style scoped>
.slideshow img {
  width: 100%;
  height: 100%;
}
.Votes {
  margin: 5px;
  padding: 10px;
}
.Votes ul {
  display: flex;
  justify-content: space-around;
  background-color: rgb(252, 202, 158);
  border-radius: 20px;
}
.Votes ul li {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  color: white;
  border-radius: 10px;
}

.apllyBtn {
  color: white;
  background-color: rgb(252, 202, 158);
  width: 50%;
  border-radius: 10px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
}
.countDown {
  background-color: #ffecb3;
  opacity: 0.6;
  text-align: center;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  margin: 10px;
  font-size: 16px;
  opacity: 0.3;
  display: flex;
  justify-content: center;
}
.search {
  display: flex;
  justify-content: center;
}
.search input {
  border: 1px solid #ecf0f1;
  padding: 10px;
}
.search div {
  background-color: rgb(252, 202, 158);
  color: white;
  padding: 10px 30px;
  border-radius: 5px;
}
.VoteContent {
  margin-top: 10px;
}
.VoteContent ._picker {
  background-color: rgb(252, 202, 158);
  color: white;
  width: 40%;
  padding: 5px;
  text-align: center;
  font-size: 16px;
}
.VoteContent {
  margin-top: 20px;
  margin: 5px;
}
.VoteContent ul {
  display: flex;
  flex-wrap: wrap;
}
.VoteContent ul li{
  position: relative;
  width: 44%;
  height: 250px;
  margin: 5px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 16px;
}
.VoteContent ul li aside {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.num {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ecf0f1;
  opacity: 0.5;
  padding: 5px;
}
.VoteContent ul li p:nth-child(2) {
  color: #979a9a;
}
.VoteContent ul li p:nth-child(3) {
  color: #ffa07a;
}
.VoteContent ul li aside img {
  width: 100%;
  height: 100%;
}
.VoteContent ul li div {
  width: 100px;
  margin: 5px auto;
  background-color: rgb(252, 202, 158);
  color: white;
  width: 40%;
  padding: 5px;
  text-align: center;
  font-size: 16px;
}
.service {
  position: fixed;
  top: 430px;
}
.service li {
  width: 40px;
  height: 40px;
  background-color: WHEAT;
  color: white;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin: 5px;
  font-size: 15px;
  opacity: 0.8;
}
</style>
